.mains{
    background: linear-gradient(180deg,#f7eedc,#fdeddb);
    height: 100vh;

}
.s_area{
    width: 332px;
height: 32px;
border-radius: 15px;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(211, 145, 251, 0.59);
padding-left: 12px;
}
.s_area input{
    border: none;
    width: 90%;
}
.keys{
    margin-top: 36px;
}
.k_area{
    width: 103px;
height: 22px;
line-height: 22px;
border-radius: 15px;
background: #FFF;
}

.num1,.num2,.num3,.num4,.num5{
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-image: url("../static/image/2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    animation: num1  3s infinite .1s;
    display: inline-block;
    transform: rotate(45deg);
}
.num2{
    transform: rotate(20deg);
    left: 200px;
    top: 80px;
}
.num3{
    width: 130px;
    height: 140px;
    line-height: 140px;
    background-image: url("../static/image/8.png");
    transform: rotate(90deg);
    left: 100px;
    top: 180px;
}
.num4{
    transform: rotate(20deg);
    left: 30px;
    top: 280px; 
    
}
.num5{
    right: 30px;
    top: 380px; 

    animation: num4  3s infinite .1s;
}
.txt1{
    display: inline-block;
    transform: rotate(45deg);
}
.txt2{
    display: inline-block;
    transform: rotate(-45deg);
}
@keyframes num1 {
    0% {
        transform: translateX(0px)
    }
    50% {
        transform: translateX(50px)
    }
    100% {
        transform: translateY(50px)
    }
    50% {
        transform: translateX(-50px)
    }
    0% {
        transform: translateX(0px)
    }
    
} 
@keyframes num4{
    0% {
        transform: translateX(0px)
    }
   
    100% {
        transform: translateY(50px)
    }
    50% {
        transform: translateX(-100px)
    }
    0% {
        transform: translateX(10px)
    }
    
} 